<template>
	<gracePage headerBG="#EB5D4B" statusBarBG="#EB5D4B">
		<view slot="gHeader" class="grace-border-b">
			<graceHeader background="#EB5D4B" style="height: 88rpx;">
				<view class="grace-header-body">
					<!-- 返回按钮 -->
					<view class="grace-header-icons grace-icons icon-arrow-left grace-white" @tap="goback"></view>
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex" style="margin-right: 50rpx;text-align: center;color: #FFFFFF;font-size: 30rpx;">注册</view>
				</view>
			</graceHeader>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<form @submit="loginNow" class="grace-form" style="margin-top:80rpx;">
				<view class="grace-form-item grace-border-b">
					<text class="iconfont icon-yonghu" style="color: #EB5D4B;font-size: 36rpx;"></text>
					<view class="grace-form-body"><input type="text" v-model="nickname" class="grace-form-input" name="nickname" placeholder="请输入昵称" /></view>
					<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="nickname != ''" @tap="clearInput('nickname')"></text>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="iconfont icon-shouji" style="color: #EB5D4B;font-size: 36rpx;"></text>
					<view class="grace-form-body"><input type="number" v-model="phoneno" class="grace-form-input" name="mobile" placeholder="请输入手机号" /></view>
					<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="phoneno != ''" @tap="clearInput('phoneno')"></text>
				</view>
				<view class="grace-form-item">
					<view class="grace-form-body  grace-border-b" style="margin-left: 0;"><input type="number" class="grace-form-input" name="authcode" placeholder="请输入验证码" /></view>
					<view class="login-sendmsg-btn grace-border-radius" style="background-color: #EB5D4B;color: #FFFFFF;" @tap="getVCode">{{ vcodeBtnName }}</view>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="iconfont icon-mima" style="color: #EB5D4B;font-size: 36rpx;"></text>
					<view class="grace-form-body">
						<input type="password" v-if="pwdType == 'password'" class="grace-form-input" name="password" v-model="pwd" placeholder="请输入密码" />
						<input type="text" v-if="pwdType == 'text'" class="grace-form-input" name="password" v-model="pwd" placeholder="请输入密码" />
					</view>
					<text class="grace-icons icon-eye grace-form-icon grace-text-center" :class="[pwdType == 'text' ? 'grace-blue' : '']" v-if="pwd != ''" @tap="showPwd"></text>
				</view>
				<view class="grace-margin-top ">
					<graceCheckBtn :checked="val" :parameter="[1, 2, 3]" @change="checkedChange" :size="40" color="#EE624E">
						<text class="grace-text" style="color: #999999;font-size: 16rpx;">我已阅读并同意</text>
						<text class="grace-text" style="color: #EE624E;font-size: 16rpx;">《乌小倌用户协议》</text>
						<text class="grace-text" style="color: #EE624E;font-size: 16rpx;">《用户隐私协议》</text>
					</graceCheckBtn>
				</view>
				<view class="grace-margin-top grace-flex grace-rows grace-space-between">
					<view class="register-btn" @tap="goLogin">去登录</view>
					<button form-type="submit" type="primary" class="grace-button grace-border-radius login-btn">注册</button>
				</view>
			</form>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceHeader from '../../graceUI/components/graceHeader.vue';
import graceCheckBtn from '../../graceUI/components/graceCheckBtn.vue';
var graceChecker = require('../../graceUI/jsTools/graceChecker.js');
export default {
	data() {
		return {
			pnpre: 0,
			vcodeBtnName: '获取验证码',
			countNum: 120,
			countDownTimer: null,
			pwd: '',
			phoneno: '',
			pwdType: 'password',
			nickname: '',
			val: false
		};
	},
	methods: {
		checkedChange: function(e) {
			this.val = e[0];
		},
		goback: function() {
			uni.navigateBack({});
		},
		clearInput: function(key) {
			this[key] = '';
		},
		changePre: function(e) {
			this.pnpre = e.detail.value;
		},
		loginNow: function(e) {
			// 表单验证
			var rule = [
				{ name: 'mobile', checkType: 'phoneno', errorMsg: '请填写正确的手机号' },
				{ name: 'password', checkType: 'notnull', errorMsg: '请输入密码' },
				{ name: 'nickname', checkType: 'notnull', errorMsg: '请输入用户名' }
			];
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if (!this.val) {
				uni.showToast({ title: '请阅读用户协议', icon: 'none' });
				return;
			}
			// 验证通过
			if (checkRes) {
				this.gRequest.post('/register/index', formData, 'form', {}, res => {
					if(res.status==1) {
						uni.setStorage({
						    key: 'userInfo',
						    data: JSON.stringify(res.data),
						    success:  () => {
						        uni.switchTab({ url: '../index/index' });
						    }
						});
					}else {
						uni.showToast({ title: res.msg, icon: 'none' });
					}
				});
			} else {
				uni.showToast({ title: graceChecker.error, icon: 'none' });
			}
		},
		getVCode: function() {
			var myreg = /^[1][0-9]{10}$/;
			if (!myreg.test(this.phoneno)) {
				uni.showToast({ title: '请正确填写手机号码', icon: 'none' });
				return false;
			}
			// 手机号码为 :  this.phoneno
			// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
			if (this.vcodeBtnName != '获取验证码' && this.vcodeBtnName != '重新发送') {
				return;
			}
			this.vcodeBtnName = '发送中...';
			this.gRequest.post('/sendsms/index', {
				phone:this.phoneno
			}, 'form', {}, res => {
				if(res.status==1) {
					uni.showToast({ title: '短信已发送，请注意查收', icon: 'none' });
				}else {
					uni.showToast({ title: "服务器错误", icon: 'none' });
				}
			});
			// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
			// 假设发送成功，给用户提示
			this.countNum = 120;
			this.countDownTimer = setInterval(
				function() {
					this.countDown();
				}.bind(this),
				1000
			);
		},
		countDown: function() {
			if (this.countNum < 1) {
				clearInterval(this.countDownTimer);
				this.vcodeBtnName = '重新发送';
				return;
			}
			this.countNum--;
			this.vcodeBtnName = this.countNum + '秒重发';
		},
		goLogin:function(){
			uni.redirectTo({ url: '../login/login' });
		},
	},
	components: {
		gracePage,
		graceCheckBtn,
		graceHeader
	}
};
</script>
<style>
.marginTop {
	margin-top: 100rpx;
}
.logo {
	width: 250rpx;
	height: 68rpx;
}
.login-sendmsg-btn {
	height: 60rpx;
	width: 200rpx;
	flex-shrink: 0;
	margin-left: 30rpx;
	text-align: center;
	background-color: #3688ff;
	line-height: 60rpx;
	font-size: 26rpx;
}
.grace-pnper {
	width: 168rpx;
	flex-shrink: 0;
}
.grace-form-label {
	width: 168rpx;
}
.grace-form-input {
	text-align: left;
}
.grace-form-item {
	padding: 10rpx 0;
}
.grace-login-three-items {
	display: block;
	width: 88rpx;
	height: 88rpx;
	line-height: 88rpx;
	font-size: 60rpx;
	color: #3688ff;
	text-align: center;
	margin: 10rpx;
}

.register-btn {
	width: 220rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	border: 2rpx solid rgba(181, 181, 181, 1);
	color: #666666;
	font-size: 28rpx;
	border-radius: 40rpx;
}
.login-btn {
	width: 420rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	border: 2rpx solid rgba(181, 181, 181, 0);
	color: #ffffff;
	background: #eb5d4b;
	font-size: 28rpx;
	border-radius: 40rpx;
}
</style>
